<template>
  <div>
    <my-header></my-header>
    <!-- 请帖页专属区域开始 -->
    <div class="inv_card w">
      <!-- 面包屑导航栏 -->
      <div class="crumbs w">
        <a href="#">结婚</a>
        &gt;
        <span>结婚请帖</span>
      </div>
      <!-- 请帖风格分类导航栏 -->
      <div class="tag_box w">
        <div class="tag_left">请帖风格:</div>
        <ul>
          <li :class="{ chosen_me: i_chosen < 0 }" @click="get_all_inv">
            <a href="#">全部</a>
          </li>
          <li :class="{ chosen_me: i_chosen == 0 }" @click="get_rec_inv">
            <a href="#">推荐</a>
          </li>
          <li
            v-for="(item, i) of inv_style"
            :key="i"
            @click="get_one_inv(i + 1)"
            :class="{ chosen_me: i_chosen === i + 2 }"
          >
            <a href="#">{{ item.style_title }}</a>
          </li>
        </ul>
      </div>
      <!-- 请帖 -->
      <div class="inv_list w">
        <div class="list_item" v-for="(item, i) of inv_item" :key="i">
          <div class="list_top">
            <img :src="item.index_pic" />
          </div>
          <div class="list_bot">{{ item.inv_title }}</div>
          <div class="inv_mask"></div>
          <div class="inv_preview">点击预览</div>
        </div>
      </div>
      <!-- 页码(注意：由于此部分样式网站多处使用，所以将样式写在common.css中) -->
      <div class="pages w">
        <span v-show="page != 1" @click="changPage(page - 1)">&lt;上一页</span>
        <ul>
          <li>
            <a
              @click="changPage(i)"
              href="#"
              :class="{ current: i == page }"
              v-for="i of pageNums"
              :key="i"
              v-show="i <= 9 && i !== pageNums"
              >{{ i }}</a
            >
            ···
            <a href="#" @click="changPage(pageNums)">{{ pageNums }}</a>
          </li>
        </ul>
        <span v-show="page != pageNums" @click="changPage(page + 1)"
          >下一页&gt;</span
        >
      </div>
    </div>
    <!-- 请帖页专属区域结束 -->
    <my-footer></my-footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 数组inv_style用于存放请求得到的请帖分类
      inv_style: [],
      // 数组inv_item用于存放页面目前显示的这些请帖，关键字段标题和图片链接
      inv_item: [],
      // 变量i保存当前选中的是哪一个种类 0 表示的是 “推荐” 被选中
      i_chosen: 0,
      // 变量page用于存储第几页
      page: 1,
      // 变量pageNums用于存储当前数据分多少页显示
      pageNums: 0,
    };
  },
  methods: {
    // 点击页码数字
    changPage(n) {
      // 更换页码
      this.page = n;
      // 清空列表
      this.inv_item = [];
      // 如果当前处于推荐分类就请求推荐的内容（按页码）
      if (this.i_chosen == 0) {
        this.get_rec_inv();
        // 如果当前选中的是全部就请求全部的内容（按页码）
      } else if (this.i_chosen == -1) {
        this.get_all_inv();
      } else {
        this.get_one_inv(n);
      }
    },
    get_all_inv() {
      if (this.i_chosen != -1) {
        // 另外需要做的一件事情就是点击那个种类让哪一个种类属于选中状态
        // 如果当前不再全部分类上就把页码换成1
        this.page = 1;
        this.i_chosen = -1;
        // 先请求所有的页码有多少
        this.get_all_pagesNum();
      }
      // 请求服务器拿到所有的请帖信息
      this.axios.get(`/inva/all?page=${this.page}`).then((res) => {
        console.log(
          `-----------------------------------------------${res.data}`
        );
        this.inv_item = res.data;
      });
    },
    get_inv_style() {
      // 请求服务器拿到所有的请帖分类字段
      this.axios.get("/inva/inv_style").then((res) => {
        // 请求得到的请帖种类交给data中的变量再由vue遍历渲染到页面
        this.inv_style = res.data;
      });
    },
    get_rec_inv() {
      if (this.i_chosen != 0) {
        this.page = 1;
        this.i_chosen = 0;
      }
      // 先请求页码数
      this.get_rec_pagesNum();
      // 请求首页推荐的请帖信息
      this.axios.get(`/inva/recommand?page=${this.page}`).then((res) => {
        this.inv_item = res.data;
      });
      // 另外需要做的一件事情就是点击那个种类让哪一个种类属于选中状态
      this.i_chosen = 0;
    },
    // 封装根据请帖类型获取请帖列表的函数
    get_one_inv(n) {
      this.i_chosen = n;
      // 先请求该种类下有多少页
      this.get_spec_pagesNum();
      this.axios.get(`/inva/show/${n}?page=${this.page}`).then((res) => {
        this.inv_item = res.data;
      });
      // 另外需要做的一件事情就是点击那个种类让哪一个种类属于选中状态
      this.i_chosen = ++n;
    },
    // 请求推荐的页码数
    get_rec_pagesNum() {
      // alert(1);
      this.axios.get(`/inva/rec_pages`).then((res) => {
        this.pageNums = Math.ceil(res.data[0].page_num);
      });
    },
    // 请求全部的页码数
    get_all_pagesNum() {
      this.axios.get(`/inva/all_pages`).then((res) => {
        this.pageNums = Math.ceil(res.data[0].page_num);
      });
    },
    // 请求特定种类的页码数
    get_spec_pagesNum() {
      this.axios.get(`/inva/pages?style_id=${this.i_chosen}`).then((res) => {
        this.pageNums = Math.ceil(res.data[0].page_num);
      });
    },
  },
  mounted() {
    // 页面加载就直接获取请帖的种类并渲染页面
    this.get_inv_style();
    // 页面加载就直接默认加载推荐请帖的列表
    this.get_rec_inv();
  },
};
</script>
<style scoped>
/* 电子请帖页面的css样式表（主要做分页查询） */
/* 页面主体 */
.inv_card {
  /* margin-top: -124px; */
  padding-top: 10px;
}
/* 面包屑导航 */
.inv_card .crumbs {
  height: 34px;
  /* background-color:skyblue; */
  font-size: 12px;
  color: #666;
}
.inv_card .crumbs a {
  text-decoration: none;
  color: #aaa;
}
.inv_card .crumbs a:hover {
  color: #f83244;
}
/* 请帖风格分类导航 */
.inv_card .tag_box {
  box-sizing: border-box;
  height: 84px;
  background-color: #fafafa;
  padding: 16px 28px 4px;
  font-size: 14px;
  /* 这里存在严重bug：通过设置margin负值将页面上移后无法访问到该部分页面（还未解决） */
  /* position: relative; */
  /* z-index: 1; */
}
.tag_left {
  width: 70px;
  height: 20px;
  float: left;
}
.tag_box > ul {
  width: 1074px;
  height: 64px;
  float: right;
}
.tag_box > ul li {
  float: left;
  margin: 0 19px 15px;
}
.chosen_me a {
  color: #f83244;
}
.tag_box > ul li:hover a {
  color: #f83244;
}
/* 请帖列表 */
.inv_list {
  padding: 20px 0 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 50px;
}
.inv_list .list_item {
  width: 210px;
  height: 380px;
  margin-bottom: 20px;
  /* background-color: pink; */
  cursor: pointer;
  position: relative;
  border: 1px solid #ddd;
}
/* 制作面纱mask */
.inv_mask {
  width: 210px;
  height: 380px;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  display: none;
}
/* 制作点击预览提示按钮（虚按钮） */
.inv_preview {
  width: 130px;
  height: 35px;
  border-radius: 20px;
  background-color: #ffa800;
  color: #fff;
  font-size: 16px;
  line-height: 35px;
  text-align: center;
  position: absolute;
  top: 173px;
  left: 38px;
  display: none;
}
.inv_list .list_item:hover .inv_mask {
  /* 鼠标经过时面纱mask显示 */
  display: block;
}
.inv_list .list_item:hover .inv_preview {
  /* 鼠标经过时预览提示显示 */
  display: block;
}
.list_item .list_top {
  width: 210px;
  height: 338px;
}
.list_item .list_top img {
  width: 210px;
}
.list_item .list_bot {
  box-sizing: border-box;
  width: 210px;
  height: 42px;
  padding: 12px 60px 12px 14px;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 页码.pages的样式写在此处 */
.pages {
  box-sizing: border-box;
  height: 96px;
  padding-top: 60px;
  margin-bottom: 50px;
}
.pages ul {
  float: left;
  margin-left: 330px;
}
.pages ul li a {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  display: inline-block;
  border: 1px solid #eee;
  line-height: 36px;
  font-size: 12px;
  text-align: center;
  margin: 0 2px;
}
.pages ul li a:hover {
  color: #ff5165;
}
.pages span {
  box-sizing: border-box;
  height: 36px;
  display: inline-block;
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid #eee;
  margin-left: 5px;
  cursor: pointer;
}
.pages span:hover {
  color: #ff5165;
}
.pages .current {
  background: #ff5165;
  color: #fff;
}
</style>